<template>
    <view class="flex-col homepage">
        <view class="flex-col wrapper">
            <view class="flex-row wraper-row">
                <view class="box"></view>
                <view class="u-line-1 text">车位信息</view>
            </view>
            <view class="flex-row wraper-row-two">
                <view class="u-line-1 text-two">小区</view>
                <view class="u-line-1 text-three">广州市南航碧桂园小区</view>
            </view>
            <view class="flex-row wraper-row-three">
                <view class="u-line-1 text-four">停车场</view>
                <view class="u-line-1 text-five">南航碧桂园小区地下停车场</view>
            </view>
            <view class="flex-row wraper-row-four">
                <view class="u-line-1 text-six">车位楼层</view>
                <view class="u-line-1 text-seven">B1</view>
            </view>
            <view class="flex-row wraper-row-five">
                <view class="u-line-1 text-eight">车位区域</view>
                <view class="u-line-1 text-nine">B区</view>
            </view>
            <view class="flex-row wraper-row-six">
                <view class="u-line-1 text-ten">车位编号</view>
                <view class="u-line-1 text-eleven">02</view>
            </view>
            <view class="flex-row wraper-row-seven">
                <view class="u-line-1 text-twelve">车位状态</view>
                <view class="u-line-1 text-thirteen">租赁</view>
                <view class="box-two"></view>
            </view>
			<view class="flex-row wraper-row-seven">
			    <view class="u-line-1 text-twelve">审核状态</view>
			    <view class="u-line-1 text-thirteen">待审核</view>
			    <view class="box-two"></view>
			</view>
        </view>
        <view class="flex-col wrapper-two">
            <view class="wraper-row-eight"></view>
            <view class="u-line-1 text-fourteen">住户信息</view>
            <view class="flex-row wraper-row-nine">
                <view class="u-line-1 text-fifteen">住户姓名</view>
                <view class="u-line-1 text-sixteen">王佳鑫</view>
            </view>
            <view class="flex-row wraper-row-ten">
                <view class="u-line-1 text-seventeen">手机号码</view>
                <view class="u-line-1 text-eighteen">1234567890</view>
            </view>
        </view>
        <view class="flex-col wrapper-three">
            <view class="flex-row wraper-row-eleven">
                <view class="box-three"></view>
                <view class="u-line-1 text-nineteen">车辆信息</view>
                <view class="u-line-1 text-twenty">取消绑定</view>
            </view>
            <view class="flex-row wraper-row-twelve">
                <view class="u-line-1 text-20">车牌号</view>
                <view class="u-line-1 text-21">浙江B66688</view>
            </view>
            <view class="flex-row wraper-row-thirteen">
                <view class="u-line-1 text-22">车辆品牌</view>
                <view class="u-line-1 text-23">宝马</view>
            </view>
            <view class="flex-row wraper-row-fourteen">
                <view class="u-line-1 text-24">车辆型号</view>
                <view class="u-line-1 text-25">X5</view>
            </view>
            <view class="flex-row wraper-row-fifteen">
                <view class="u-line-1 text-26">车身颜色</view>
                <view class="u-line-1 text-27">白色</view>
            </view>
        </view>
        <view class="flex-row wrapper-four">
            <u-button class="button" type="success" size="medium">
                修改
            </u-button>
            <u-button class="button-two" :hairLine="false">
                删除
            </u-button>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {}
        },
        methods: {

        }
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 50rpx 21rpx 0rpx 21rpx;

        .wrapper {
            width: 696rpx;
            margin-right: auto;
            margin-left: auto;
            padding: 30rpx 0rpx 51rpx 27rpx;
			margin-bottom: 50rpx;
            border-width: 2rpx;
            border-style: solid;
            border-color: rgba(226, 226, 226, 1);

            .wraper-row {
                width: 188rpx;
                justify-content: space-between;
                margin-bottom: 20rpx;

                .box {
                    width: 18rpx;
                    height: 42rpx;
                    border-radius: 100rpx;
                    background: rgba(0, 72, 255, 1);
                }

                .text {
                    width: 148rpx;
                    height: 42rpx;
                    font-size: 32rpx;
                    font-weight: 600;
                    color: rgba(110, 110, 110, 1);
                }
            }

            .wraper-row-two {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 27rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-two {
                    width: 64rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-three {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }

            .wraper-row-three {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 25rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-four {
                    width: 88rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-five {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }

            .wraper-row-four {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 24rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-six {
                    width: 128rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-seven {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }

            .wraper-row-five {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 23rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-eight {
                    width: 128rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-nine {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }

            .wraper-row-six {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 23rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-ten {
                    width: 128rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-eleven {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }

            .wraper-row-seven {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 23rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-twelve {
                    width: 148rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-thirteen {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(255, 184, 0, 1);
                }

                .box-two {
                    width: 130rpx;
                    height: 178rpx;
                    bottom: 60rpx;
                    left: 156rpx;
                    position: absolute;
                }
            }
        }

        .wrapper-two {
            width: 696rpx;
            margin-right: auto;
            margin-bottom: 46rpx;
            margin-left: auto;
            padding: 30rpx 0rpx 18rpx 24rpx;
            border-width: 2rpx;
            border-style: solid;
            border-color: rgba(226, 226, 226, 1);

            .wraper-row-eight {
                width: 18rpx;
                height: 42rpx;
                margin: 0rpx 0rpx -42rpx 2rpx;
                border-radius: 100rpx;
                background: rgba(0, 72, 255, 1);
            }

            .text-fourteen {
                width: 148rpx;
                margin: 0rpx 0rpx 24rpx 42rpx;
                font-size: 32rpx;
                font-weight: 600;
                color: rgba(110, 110, 110, 1);
            }

            .wraper-row-nine {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 30rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-fifteen {
                    width: 124rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-sixteen {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }

            .wraper-row-ten {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 28rpx 30rpx 10rpx;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-seventeen {
                    width: 118rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-eighteen {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }
        }

        .wrapper-three {
            width: 696rpx;
            height: 632rpx;
            margin-right: auto;
            margin-bottom: 40rpx;
            margin-left: auto;
            padding: 30rpx 0rpx 0rpx 24rpx;
            border-width: 2rpx;
            border-style: solid;
            border-color: rgba(226, 226, 226, 1);

            .wraper-row-eleven {
                width: 653rpx;
                margin: 0rpx 0rpx 20rpx 2rpx;

                .box-three {
                    width: 18rpx;
                    height: 42rpx;
                    margin-right: 22rpx;
                    border-radius: 100rpx;
                    background: rgba(0, 72, 255, 1);
                }

                .text-nineteen {
                    width: 148rpx;
                    margin-right: 336rpx;
                    font-size: 32rpx;
                    font-weight: 600;
                    color: rgba(110, 110, 110, 1);
                }

                .text-twenty {
                    width: 128rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(0, 21, 255, 1);
                }
            }

            .wraper-row-twelve {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 30rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-20 {
                    width: 100rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-21 {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }

            .wraper-row-thirteen {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 28rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-22 {
                    width: 134rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-23 {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }

            .wraper-row-fourteen {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 27rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-24 {
                    width: 128rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-25 {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }

            .wraper-row-fifteen {
                width: 642rpx;
                justify-content: space-between;
                padding: 48rpx 26rpx 30rpx 10rpx;
                border-bottom-width: 2rpx;
                border-bottom-style: solid;
                border-bottom-color: rgba(226, 226, 226, 1);

                .text-26 {
                    width: 128rpx;
                    color: rgba(150, 150, 150, 1);
                }

                .text-27 {
                    width: 452rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(76, 76, 76, 1);
                }
            }
        }

        .wrapper-four {
            width: 708rpx;
            justify-content: space-between;
            padding: 14rpx 12rpx 16rpx 16rpx;

            .button {
                width: 322rpx;
                height: 72rpx;
                margin-top: 2rpx;
                font-size: 28rpx;
                background: rgba(0, 89, 255, 1);
                font-weight: 600;
            }

            .button-two {
                width: 328rpx;
                height: 76rpx;
                border-width: 2rpx;
                border-style: solid;
                border-color: rgba(255, 87, 34, 1);
                color: rgba(255, 87, 34, 1);
            }
        }
    }
</style>